<template>
	<view class="page content-20">
		<view class="meet-item">
			<view class="meet-status item-box" >
				<image class="avatar item-img" :src="info.avatar" mode=""></image>
				<view class="item-info">
					<view class="meet-title">{{info.bookingTypeName}}</view>
				<view class="desc" style="margin-top: 10upx;">预约时间: {{info.bookingTime | formatTime}}</view>
				</view>
				<view class="link" @click="setStatus(info.state, info.id)">
					<view class="status theme" v-if="info.state===-1">未处理</view>
					<view class="status red" v-if="info.state===0">已拒绝</view>
					<view class="status theme" v-if="info.state===1">已同意</view>
					<u-icon name='arrow-down' v-if="info.state===-1" size='20' color='#0bbf68' ></u-icon>
				</view>
			</view>
			<u-action-sheet :list="listAction" v-model="show" @click="clickMenu"></u-action-sheet>
			
		</view>
		<view class="detail-section">
			<view class="section-line">
				<view class="section-title">预约爱宠</view>
				<view class="section-con">{{info.nickName}}({{info.varietiesName}})</view>
			</view>
		</view>
		<view class="detail-section">
			<view class="section-line">
				<view class="section-title">联系人</view>
				<view class="section-con">{{info.userNickName}}</view>
			</view>
			<view class="section-line">
				<view class="section-title">联系电话</view>
				<view class="section-con">{{info.phoneNumber}}</view>
			</view>
		</view>
		<view class="detail-section">
			<view class="section-line">
				<view class="section-title">相关备注</view>
				<view class="section-con">{{info.remarks}}</view>
			</view>
			<view class="section-line" v-if="info.reasons">
				<view class="section-title">失败原因</view>
				<view class="section-con">{{info.reasons}}</view>
			</view>
		</view>
		
		<view class="success-btns" v-if="info.phoneNumber">
			<view class="btn" @click="$makePhoneCall(info.phoneNumber)">联系宠物主人</view>
		</view>
	</view>
</template>

<script>
	import common from '../utils/common.js'
	import api from '../utils/api.js'
	export default {
		data() {
			return {
				info: {},
				common,
				userInfo: {},
				listAction: [{
					text: '同意预约',
					color: 'blue',
						value: 1,
					fontSize: 28
				}, {
					text: '拒绝预约',
					color: 'blue',
					fontSize: 28,
					value: 0
				}],
				show: false,
				currentId: ''
			}
		},
		
		onLoad(options) {
			this.info = JSON.parse(options.info)
			console.log(this.info);
			this.userInfo = common.getUserInfo()
		},
		
		methods: {
			// 更改预约状态
			setStatus(status, id) {
				this.currentId = id
				if(status === -1) {
					this.show = true
				}
			},
			
			clickMenu(index) {
				let resultState = this.listAction[index]['value']
				console.log(resultState);
				api.setOnlineBookingState({ resultState, id: this.currentId }, res => {
					this.info.state = resultState
					this.$showToast('预约状态修改成功~')
					console.log(this.info);
				})
			},
		}
		
	}
</script>

<style scoped lang="scss">
	.meet-item{
		background-color: #fff;
		box-sizing: border-box;
		margin-bottom: 0;
		border-bottom: 1px solid $border-color;
		padding: 30upx 0;
	}
	.meet-status{
		@include flex-base;
		justify-content: space-between;
	}
	.meet-title{
		font-size: $font-size-30;
		font-weight: bold;
	}
	.status{
		font-size: $font-size-28;
		margin-right: 10upx;
	}
	.meet-info{
		margin-top: 20upx;
		@include flex-base;
		justify-content: space-between;
		
	}
	.info{
		display: flex;
		flex-direction: column;
	}
	
	.desc{
		background-image: url(../static/icon_10.png);
		background-size: 20upx 20upx;
		background-repeat: no-repeat;
		background-position: left center;
		padding-left: 35upx;
	}
	.detail-section{
		padding: 30upx 0;
		border-bottom: 1px solid $border-color;
	}
	.section-line{
		@include flex-base;
		height: 30upx;
		margin-bottom: 30upx;
	}
	.section-line:last-child{
		margin-bottom: 0;
	}
	.section-title{
		width: 170upx;
		color: #666666;
		font-size: $font-size-28;
	}
	.success-btns{
		justify-content: center;
	}
</style>
